<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/26
  Time: 19:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path = request.getContextPath()+"/"; %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <base href="<%=path%>" >
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="layui/lib/layui/css/layui.css">
    <link rel="stylesheet" href="js/tree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="layui/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>

            <div id="treeDemo" class="ztree" ></div>

</body>

<script type="text/javascript" src="js/tree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/tree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/tree/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="js/tree/js/jquery.ztree.excheck.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['form','layer'], function(){
        let form=layui.form,
            layer=layui.layer;
        let ztree;



        //创建树状对象
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            data:{
                simpleData:{
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            //设置复选框
            check:{
                enable:true
            },
            //用于捕获checked被勾选或者取消勾选的事件回调函数
            callback:{
                onCheck:nodeCheck
            }
        };
        function nodeCheck(event, treeId, treeNode) {
            //alert(JSON.stringify(treeNode));
            let roleId = '${roleId}'; // 角色Id
            let url='system/role';
            let checkedNodes = ztree.getCheckedNodes(true);// 获取选中的结点

            let resourceIds = [];
            if (checkedNodes.length>0){
            if (checkedNodes.length>=0){
                for (let i = 0;i<checkedNodes.length;i++){
                    resourceIds[i]=checkedNodes[i].id ;
                }
            }

            $.ajax({
                url:url,
                type: 'post',
                dataType: 'json',
                /*traditional:true,*/
                data:{"roleId":roleId,"resourceIds":resourceIds},
                success:function (ret) {
                    if (!ret.status){
                        layer.msg("操作失败")
                    }
                }
            });

        }
        }


        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes;

        $(document).ready(function(){
            createTree();
            let height = $(document).height();
            $(".layui-col-md7").css("height",height+"px");
        });

        //拿树的数据
        function createTree() {

            $.getJSON("system/resource/treeData?flag=1&roleId=${roleId}&t="+new Date(),function (ret) {
                ztree= $.fn.zTree.init($("#treeDemo"), setting, ret);
                ztree.expandAll(true);
            })
        }

    });
</script>
</html>